<template>
  <div class="chart-wrapper">
    <div class="bar-chart" ref="bar-chart"></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";

import "echarts/lib/chart/pie";
import "echarts/lib/component/legend";
import "echarts/lib/component/legendScroll";

export default {
  mounted() {
    const chart = echarts.init(this.$refs['bar-chart']);
    chart.setOption({
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: '10%',
        y:'middle',
        itemWidth: 10,
        itemHeight: 10
      },
      color: ['#FF9E3E', '#27A5E6', '#ECCFA3', '#b3842e0', '#8b3e98', '#EB4339', '#1EB858'],
      series: [
        {
          type: 'pie',
          hoverAnimation: false,
          radius: ['50%', '85%'],
          center: [105, 85],
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          }
        }
      ]
    });
    this.chart = chart;
  },
  methods: {
    showLoading() {
      this.chart.showLoading();
    },
    hideLoading() {
      this.chart.hideLoading();
    },
    setOption(options) {
      console.log(options)
      this.chart.setOption(options);
    }
  }
};
</script>

<style>
.chart-wrapper {
  padding: 25px 0;
  background: #fff;
  margin-bottom: 10px;
}

.bar-chart {
  height: 190px;
}
</style>


